<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" transparentFixedFontColor="#FFF" type="transparentFixed"
			fontColor="#000"></nav-bars>
		<view class="wrap" :style="{background: 'url('+bgImg+')',backgroundSize:'cover'}">
			<view class="headImage" v-if="goodsList.length>0">
				<!-- <image :src="imageUlr+'/static/activity/banner_details.png'" mode="widthFix"></image> -->
			</view>
			<view class="main" v-if="goodsList.length>0">
				<view class="goodsView">
					<view class="titleImage">
						<image :src="imageUlr+'/static/activity/618_activity_title.png'" mode="widthFix"></image>
					</view>
					<view class="paddingBox">
						<view class="goodsBox">
							<view class="goodsList" v-for="(item,index) in goodsList">
								<view class="goodsCover">
									<image :src="item.main_imgurl"></image>
								</view>
								<view class="sidebarRight">
									<view class="title">{{item.product_title}}</view>
									<view class="blockBottom">
										<view class="goodsPrice">
											<view class="price">
												<text>￥</text>
												{{item.price}}
											</view>
											<view class="market-price">
												￥{{item.primary_price}}
											</view>
										</view>
										<view class="buyBtn"
											@click="goodsBuy('/pages_mall/pages/mall/goods_details/goods_details?id='+item.product_id)">
											立即抢购</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="footerImage" v-if="goodsList.length>0">
					<image :src="imageUlr+'/static/activity/footer.png'" mode="widthFix"></image>
				</view> -->
			</view>
			<view class="notList" v-else>
				<image :src="`${imageUlr}/static/constr/notList.png`" mode=""></image>
				空空如也
			</view>
		</view>
	</view>
</template>

<script>
	import activity from '@/service/activity.js'
	export default {
		components: {

		},
		data() {
			return {
				navBackground: '',
				imageUlr: this.$static,
				pagesize: 10,
				page: 1,
				goodsList: [],
				userId: "",
				bgImg: this.$static + '/static/activity/618_activity_bg.png'
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId')
			this.pecialOfferGoods();
		},
		onShareAppMessage(res) {
			let that = this
			if (res.from === 'button') {}
			return {
				title: '清货专区',
				imageUrl: 'https://manager.ryz1620.com/static/activity/special_offer.png',
				path: '/pages_activity/pages/specialArea/index?share_uid=' + this.userId,
				success: function(res) {}
			}
		},
		onShareTimeline(res) {
			if (res.from === 'menu') {}
			return {
				title: '清货专区',
				imageUrl: 'https://manager.ryz1620.com/static/activity/special_offer.png',
				path: '/pages_activity/pages/specialArea/indexx?share_uid=' + this.userId,
				success: function(res) {

				}
			};
		},
		onReachBottom() {
			this.page++;
			this.pecialOfferGoods();
		},
		methods: {
			pecialOfferGoods() {
				uni.showLoading()
				activity.specialOffer({
						page: this.page,
						pagesize: this.pagesize,
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1 || res.data.goods.length > 0) {
							let data = res.data.goods;
							this.goodsList = [...this.goodsList, ...data];
						} else {
							this.goodsList = [];
						}
					})
			},
			goodsBuy(url) {
				this.$common.navigateTo(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		.wrap {
			width: 100%;
			min-height: 100vh;
			max-height: 100vh;
			position: relative;

			.headImage {
				width: 100%;
				height: 662rpx;

				image {
					width: 100%;
				}
			}

			.main {
				width:100%;
				height: 100%;
				margin: auto;
				padding-bottom: 60rpx;
				background: linear-gradient(to left,#edcfef,#e9a8e7);
				.goodsView {
					width: 94%;
					height: auto;
					padding: 16rpx 0rpx 30rpx 0;
					margin: auto;
					// margin-top: -648rpx;
					background: #FFFFFF;
					// background: linear-gradient(0deg, #D89C56 0%, #FDEFB5 99%);
					border-radius: 16rpx;

					.titleImage {
						width: 440rpx;
						height: 68rpx;
						position: absolute;
						left: 50%;
						transform: translate(-50%, -50%);

						image {
							width: 100%;
							height: 100%;
							text-align: center;
						}
					}

					.paddingBox {
						width: 96%;
						margin: auto;
						padding: 48rpx 0 28rpx 0;
						border-radius: 2rpx;
						border: 4rpx solid #D39DD9;

						.goodsBox {
							width: 96%;
							height: auto;
							background: #fff;
							margin: auto;
							padding-top: 4rpx;

							.goodsList {
								width: 98%;
								height: 280rpx;
								display: flex;
								margin: auto;
								justify-content: space-around;

								.goodsCover {
									max-width: 400rpx;
									padding-left: 18rpx;
									height: 258rpx;

									image {
										width: 258rpx;
										height: 100%;
										border-radius: 16rpx;
										margin: 10rpx auto;
									}
								}

								.sidebarRight {
									width: 60%;
									padding: 20rpx 10rpx 0 20rpx;

									.title {
										width: 100%;
										height: 74rpx;
										font-size: 28rpx;
										font-weight: bold;
										color: #333333;
										line-height: 36rpx;
										display: block;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
										overflow: hidden;
									}

									.blockBottom {
										width: 100%;
										display: flex;
										justify-content: space-between;
										align-items: center;
										flex-flow: wrap;
										margin-top: 80rpx;

										.goodsPrice {
											.price {
												width: 105rpx;
												height: 42rpx;
												font-size: 36rpx;
												font-weight: bold;
												color: #B63ADB;

												text {
													font-size: 24rpx;
												}
											}

											.market-price {
												font-size: 24rpx;
												text-decoration: line-through;
												color: #999999;
											}
										}

										.buyBtn {
											width: 160rpx;
											height: 52rpx;
											background: linear-gradient(0deg, #8D4CBA 0%, #CD80DF 100%);
											border-radius: 28rpx;
											color: #FFFFFF;
											line-height: 52rpx;
											text-align: center;

										}
									}
								}
							}
						}
					}
				}
			}

			.footerImage {
				width: 100%;
				height: auto;

				image {
					width: 100%;
				}
			}

			// 没有数据
			.notList {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				margin: 200rpx auto;
				height: 400rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 426rpx;

				image {
					width: 426rpx;
					height: 356rpx;
					margin-bottom: 40rpx;
				}

				font:500 40rpx/56rpx PingFang SC;
				color: #333;
			}
		}

	}
</style>
